<template>
    <div>
        <!-- 搜索容器 -->
        <div class="search-container">
            <span class="search-label">公司：</span>
            <el-input v-model="input" placeholder="搜索公司" class="search-input"></el-input>
            <span class="search-label">职位：</span>
            <el-input v-model="input" placeholder="搜索职位" class="search-input"></el-input>
            <span class="search-label">时间范围：</span>
            <el-date-picker v-model="value1" type="daterange" range-separator="至" start-placeholder="开始日期"
                end-placeholder="结束日期">
            </el-date-picker>




            <el-button type="primary" class="search-button">查询</el-button>
            <el-button type="success" class="search-button">重置</el-button>

            <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value">
            </el-option>

        </div>

        <el-table :data="tableData" border style="width: 100%; margin-top: 15px;"
            :header-cell-style="{ textAlign: 'center', background: '#f5f7fa', fontWeight: 'bold' }"
            :cell-style="{ textAlign: 'center' }">

            <!-- 第一列：公司名称 -->
            <el-table-column prop="company" label="公司名称" width="150"></el-table-column>

            <!-- 第二列：HR姓名 -->
            <el-table-column prop="hrName" label="HR姓名" width="120"></el-table-column>

            <!-- 第三列：职位名称 -->
            <el-table-column prop="position" label="职位名称" width="150"></el-table-column>

            <!-- 第四列：职位简介 -->
            <el-table-column prop="description" label="职位简介" width="200"
                :show-overflow-tooltip="true"></el-table-column>

            <!-- 第五列：技能要求 -->
            <el-table-column prop="skills" label="技能要求" width="200" :show-overflow-tooltip="true"></el-table-column>

            <!-- 第六列：薪资 -->
            <el-table-column prop="salary" label="薪资" width="120"></el-table-column>

            <!-- 第七列：福利待遇 -->
            <el-table-column prop="benefits" label="福利待遇" width="200" :show-overflow-tooltip="true"></el-table-column>

            <!-- 第八列：工作职责 -->
            <el-table-column prop="responsibilities" label="工作职责" width="250"
                :show-overflow-tooltip="true"></el-table-column>

            <!-- 第九列：发布时间 -->
            <el-table-column prop="publishTime" label="发布时间" width="150"></el-table-column>

            <!-- 第十列：状态（固定在右侧） -->
            <el-table-column prop="status" label="状态" width="120" fixed="right">
                <template slot-scope="scope">
                    <el-tag :type="getStatusType(scope.row.status)">
                        {{ scope.row.status }}
                    </el-tag>
                </template>
            </el-table-column>
        </el-table>

        <!-- 分页组件：左对齐并距离表格10px -->
        <el-pagination class="pagination-left" background layout="prev, pager, next" :total="1000">
        </el-pagination>
    </div>
</template>

<script>
export default {
    methods: {
        getStatusType(status) {
            const statusMap = {
                '招聘中': 'success',
                '已暂停': 'warning',
                '已结束': 'info',
                '热门': 'danger'
            }
            return statusMap[status] || 'info'
        }
    },
    data() {
        return {
            input: '',
            options: [{
                value: '选项1',
                label: '黄金糕'
            }, {
                value: '选项2',
                label: '双皮奶'
            }, {
                value: '选项3',
                label: '蚵仔煎'
            }, {
                value: '选项4',
                label: '龙须面'
            }, {
                value: '选项5',
                label: '北京烤鸭'
            }],
            value: '',

            tableData: [
                {
                    company: '腾讯科技',
                    hrName: '张经理',
                    position: '高级前端工程师',
                    description: '负责微信生态相关产品的前端开发工作',
                    skills: 'Vue/React, TypeScript, Webpack',
                    salary: '30-50K·15薪',
                    benefits: '六险一金, 带薪年假, 年度体检, 免费三餐',
                    responsibilities: '1. 负责核心产品前端开发\n2. 参与技术方案设计\n3. 性能优化',
                    publishTime: '2023-05-15',
                    status: '招聘中'
                },
                {
                    company: '阿里巴巴',
                    hrName: '李主管',
                    position: 'Java开发专家',
                    description: '负责电商平台核心系统开发',
                    skills: 'Java, Spring Cloud, MySQL, Redis',
                    salary: '40-60K·16薪',
                    benefits: '七险一金, 股权激励, 住房补贴',
                    responsibilities: '1. 系统架构设计\n2. 高并发场景优化\n3. 团队技术指导',
                    publishTime: '2023-05-10',
                    status: '已暂停'
                },
                {
                    company: '字节跳动',
                    hrName: '王HR',
                    position: '产品经理',
                    description: '负责短视频产品功能规划',
                    skills: 'Axure, 数据分析, 用户研究',
                    salary: '35-50K·15薪',
                    benefits: '六险一金, 租房补贴, 弹性工作制',
                    responsibilities: '1. 需求分析\n2. 产品原型设计\n3. 跨部门协调',
                    publishTime: '2023-05-18',
                    status: '热门'
                },
                {
                    company: '华为技术',
                    hrName: '赵总监',
                    position: '云计算架构师',
                    description: '负责云服务解决方案设计',
                    skills: 'Kubernetes, Docker, 微服务',
                    salary: '45-70K·16薪',
                    benefits: '五险一金, 全球派遣机会, 子女教育补贴',
                    responsibilities: '1. 技术方案设计\n2. 客户需求对接\n3. 团队管理',
                    publishTime: '2023-05-05',
                    status: '招聘中'
                }
            ]
        }
    }
}
</script>

<style>
/* 搜索容器样式 */
.search-container {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 10px;
    padding: 10px 0;
}

.search-label {
    white-space: nowrap;
    font-size: 14px;
    color: #606266;
}

.search-input {
    width: 200px;
}

.search-button {
    margin-left: 10px;
}

/* 表格样式 */
.el-table {
    margin-top: 15px;
    font-size: 14px;
}

.el-table th {
    height: 60px;
    padding: 10px 0;
    background-color: #f5f7fa !important;
}

.el-table__body-wrapper {
    overflow-x: auto;
}

/* 分页左对齐样式 */
.pagination-left {
    margin-top: 10px;
    /* 距离表格10px */
    text-align: left;
    /* 左对齐 */
}

/* 状态标签样式 */
.el-table .el-tag {
    padding: 0 8px;
    height: 24px;
    line-height: 24px;
    font-size: 12px;
}

/* 响应式调整 */
@media screen and (max-width: 1600px) {
    .el-table {
        font-size: 13px;
    }
}
</style>